<template>
  <div>
    <!-- 搜索区域 -->
    <el-form inline :model="searchForm" style="margin-bottom: 10px;">
      <el-form-item
        v-for="field in searchFields"
        :key="field.prop"
        :label="field.label"
      >
        <el-input v-model="searchForm[field.prop]" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="emit('search', searchForm)">查询</el-button>
        <el-button @click="resetSearchForm">重置</el-button>
        <el-button type="primary" @click="openAddDialog">新增</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table :data="data" style="width: 100%; margin-top: 10px;">
      <el-table-column
        v-for="col in columns"
        :key="col.prop"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
        align="center"
        header-align="center"
      />
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <el-button size="small" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="$emit('delete', scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      style="margin-top: 15px; text-align: right;"
      background
      layout="prev, pager, next, jumper"
      :current-page="pagination.page"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      @current-change="page => $emit('page-change', page)"
    />

    <!-- 弹窗表单 -->
    <el-dialog :title="dialogMode === 'add' ? '新增' : '编辑'" v-model="dialogVisible">
      <el-form :model="form">
        <el-form-item
          v-for="field in dialogFields"
          :key="field.prop"
          :label="field.label"
        >
          <el-input v-model="form[field.prop]" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// Props
defineProps({
  columns: Array,
  data: Array,
  pagination: Object,
  dialogFields: Array,
  searchFields: Array, // 搜索字段配置
})

// Emits
const emit = defineEmits(['add', 'edit', 'delete', 'page-change', 'search'])

// Dialog control
const dialogVisible = ref(false)
const dialogMode = ref('add') // 'add' or 'edit'
const form = ref({})
const searchForm = ref({})

// 打开新增
function openAddDialog() {
  dialogMode.value = 'add'
  form.value = {}
  dialogVisible.value = true
}

// 打开编辑
function openEditDialog(row) {
  dialogMode.value = 'edit'
  form.value = { ...row }
  dialogVisible.value = true
}

// 提交新增或编辑
function handleSubmit() {
  if (dialogMode.value === 'add') {
    emit('add', form.value)
  } else {
    emit('edit', form.value)
  }
  dialogVisible.value = false
}

// 重置搜索表单
function resetSearchForm() {
  Object.keys(searchForm.value).forEach(key => {
    searchForm.value[key] = ''
  })
}
</script>
